<template>
  <div class="system-info-card">
    <el-descriptions title="系统状态" :column="2" border>
      <el-descriptions-item label="CPU状态">
        <el-progress :percentage="cpuUsage" :color="cpuProgressColor" :inline="true" :stroke-width="18"
          :text-inside="true" :format="n => isLoading ? '加载中...' : `${cpuCores}核心 / ${n}%`"
          class="custom-progress systeminfo-progress" />
      </el-descriptions-item>
      <el-descriptions-item label="内存状态">
        <el-progress :percentage="memoryUsage" :color="memoryProgressColor" :inline="true" :stroke-width="18"
          :text-inside="true" :format="n => isLoading ? '加载中...' : `${memoryTotal} / ${n}%`"
          class="custom-progress systeminfo-progress" />
      </el-descriptions-item>
      <el-descriptions-item label="操作系统">{{ osVersion }}</el-descriptions-item>
      <el-descriptions-item label="服务器运行">{{ serverUptime }}</el-descriptions-item>
      <el-descriptions-item label="PHP版本">{{ phpVersion }}</el-descriptions-item>
      <el-descriptions-item label="Swoole版本">{{ swooleVersion }}</el-descriptions-item>
      <el-descriptions-item label="MySQL版本">{{ mysqlVersion }}</el-descriptions-item>
      <el-descriptions-item label="Redis版本">{{ redisVersion }}</el-descriptions-item>
      <el-descriptions-item label="SunAdmin版本" :span="2" class-name="sunadmin-version-label">{{ sunAdminVersion
        }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import http from '../../../utils/request.js'
import { wsManager } from '../../../utils/wsManager'

// 各项系统指标
const cpuCores = ref('加载中...')
const cpuUsage = ref(0)
const memoryTotal = ref('加载中...')
const memoryUsage = ref(0)
const osVersion = ref('加载中...')
const serverUptime = ref('加载中...')
const phpVersion = ref('加载中...')
const swooleVersion = ref('加载中...')
const mysqlVersion = ref('加载中...')
const redisVersion = ref('加载中...')
const sunAdminVersion = ref('加载中...')

// 加载状态
const isLoading = ref(true)

// 进度条颜色
const cpuProgressColor = computed(() => {
  if (isLoading.value) return '#409EFF'
  if (cpuUsage.value < 40) return '#67c23a'
  if (cpuUsage.value < 70) return '#e6a23c'
  return '#f56c6c'
})
const memoryProgressColor = computed(() => {
  if (isLoading.value) return '#409EFF'
  if (memoryUsage.value < 40) return '#67c23a'
  if (memoryUsage.value < 70) return '#e6a23c'
  return '#f56c6c'
})

// 获取系统信息
async function fetchSystemInfo() {
  try {
    isLoading.value = true
    const res = await http.get('/sunAdmin/systemInfo/metrics')
    if (res.code !== 200) {
      throw new Error(res.message)
    }
    const data = res.data
    cpuCores.value = data.cpu_cores
    cpuUsage.value = typeof data.cpu_usage === 'number' ? data.cpu_usage : 0
    memoryTotal.value = data.memory_total
    memoryUsage.value = typeof data.memory_usage === 'number' ? data.memory_usage : 0
    osVersion.value = data.os_version
    serverUptime.value = data.server_uptime
    phpVersion.value = data.php_version
    swooleVersion.value = data.swoole_version
    mysqlVersion.value = data.mysql_version
    redisVersion.value = data.redis_version
    sunAdminVersion.value = data.sun_admin_version
  } catch (e) {
    cpuCores.value = '获取失败'
    cpuUsage.value = 0
    memoryTotal.value = '获取失败'
    memoryUsage.value = 0
    osVersion.value = '获取失败'
    serverUptime.value = '获取失败'
    phpVersion.value = '获取失败'
    swooleVersion.value = '获取失败'
    mysqlVersion.value = '获取失败'
    redisVersion.value = '获取失败'
    sunAdminVersion.value = '获取失败'
  } finally {
    isLoading.value = false
  }
}

let removeWsHandler = null;

onMounted(() => {
  fetchSystemInfo();
  removeWsHandler = wsManager.addMessageHandler((msg) => {
    if (msg.type === 'system_metrics') {
      if (typeof msg.data.cpu_usage === 'number') cpuUsage.value = msg.data.cpu_usage;
      if (typeof msg.data.memory_usage === 'number') memoryUsage.value = msg.data.memory_usage;
    }
  });
});

onUnmounted(() => {
  if (removeWsHandler) removeWsHandler();
});
</script>

<style scoped lang="less">
.system-info-card {
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-top: 20px;
  width: 100%; // 确保组件宽度适应父容器
}

:deep(.el-descriptions__label) {
  font-weight: bold;
  color: #303133;
  width: 110px; // 稍微减小默认标签宽度，以适应整体
  text-align: right;
  padding-right: 10px !important;
  white-space: nowrap; // 防止标签内部换行
}

// 为SunAdmin版本单独设置更宽的标签
:deep(.sunadmin-version-label .el-descriptions__label) {
  width: 130px !important; // 给SunAdmin版本标签更宽的空间
}

:deep(.el-descriptions__content) {
  color: #606266;
}

:deep(.el-progress-bar__outer) {
  background-color: #ebeef5;
}

// 使进度条和前面的文字在同一行显示更好看
:deep(.el-descriptions-item__content) {
  display: flex;
  align-items: center;
  gap: 8px; // 文字和进度条之间的间隙
}

:deep(.custom-progress .el-progress-bar__innerText) {
  color: #4c4c4c !important;
  text-shadow: 0 1px 2px #fff, 0 -1px 2px #fff;
}

.systeminfo-progress {
  width: 100% !important;
  min-width: 120px;
  display: flex;
  align-items: center;
  margin: 0 auto;
}

:deep(.el-descriptions-item__content) {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
}
</style>